<template>
  <div :class="{ bg_color_white: status == 0 }">
    <uni-nav-bar
      :border="false"
      left-icon="arrowleft"
      :backgroundColor="tabarBgColor[status]"
      statusBar
      :title="taskName"
      fixed
      @clickLeft="back"
    />
    <div
      class="await"
      :style="{ height: useHeight + 'rpx' }"
      v-if="status == 0"
    >
      <image class="await_icon" src="@/static/images/exam/status0.png"></image>
      <div class="await_txt">提交成功</div>
      <div class="await_tip">等待老师评分</div>
      <div class="await_confirm" @click="back">确 定</div>
    </div>
    <div v-if="status == 1" class="pass_content">
      <img class="pass_icon" src="@/static/images/pass_icon.png" alt="" />
      <div class="pass_txt">
        通过{{ type == "onlineExam" ? "考试" : "考核抽查" }}
      </div>
      <div class="pass_info">
        <!-- <div class="pass_info_item">
          <div class="item_label">考试题目</div>
          <div class="item_value">1.3 钳工基础XXXX</div>
        </div> -->
        <div class="pass_info_item">
          <div class="item_label">卷面总分</div>
          <div class="item_value">
            {{ paper.totalScore ? paper.totalScore : 0 }}分
          </div>
        </div>
        <div class="pass_info_item">
          <div class="item_label">及格分数</div>
          <div class="item_value">
            {{
              paper.passingGrades
                ? paper.passingGrades
                : paper.passingGrade
                ? paper.passingGrade
                : 0
            }}分
          </div>
        </div>
        <div class="pass_info_item">
          <div class="item_label">考核得分</div>
          <div class="item_value font_bold">{{ paper.score }}分</div>
        </div>

        <div class="pass_info_item">
          <div class="item_label">考核结果</div>
          <div class="item_value color_over">通过</div>
        </div>
        <div class="sure_btn" @click="back">确定</div>
        <div class="detial_btn" @click="lookAnswer">
          查看{{ type == "onlineExam" ? "考试" : "考核抽查" }}答案
        </div>
      </div>
    </div>
    <div v-if="status == 2" class="pass_content">
      <img class="pass_icon" src="@/static/images/not_pass_icon.png" alt="" />
      <div class="pass_txt">
        未通过{{ type == "onlineExam" ? "考试" : "考核抽查" }}
      </div>
      <div class="pass_info">
        <!-- <div class="pass_info_item">
          <div class="item_label">考试题目</div>
          <div class="item_value">1.3 钳工基础XXXX</div>
        </div> -->
        <div class="pass_info_item">
          <div class="item_label">卷面总分</div>
          <div class="item_value">
            {{ paper.totalScore ? paper.totalScore : 0 }}分
          </div>
        </div>
        <div class="pass_info_item">
          <div class="item_label">通过分数</div>
          <div class="item_value">
            {{ paper.passingGrades ? paper.passingGrades : 0 }}分
          </div>
        </div>
        <div class="pass_info_item">
          <div class="item_label">考核得分</div>
          <div class="item_value font_bold">{{ paper.score }}分</div>
        </div>
        <div class="pass_info_item">
          <div class="item_label">考核结果</div>
          <div class="item_value not_color_over">未通过</div>
        </div>
        <div @click="showDialog = true" class="reset_btn">补考</div>
        <div class="detial_btn" @click="lookAnswer">
          查看{{ type == "onlineExam" ? "考试" : "考核抽查" }}答案
        </div>
      </div>
      <vDialog
        use-slot
        :showDialog.sync="showDialog"
        :contentText="txt"
        :confirmButtonText="confirmButtonText"
        :errorButtonText="errorButtonText"
        :showError="showError"
        :cancelButtonText="cancelButtonText"
        @confirm="dialogConfirm"
        @error="reStartConfirm"
      >
      </vDialog>
    </div>
    <img v-if="status > 0" class="ablue" :src="classList[status]" alt="" />
  </div>
</template>

<script>
import vDialog from "@/components/v-dialog";
import {
  getExamPaper,
  examApply,
  getExamApplyTimes,
  reStart,
  ApplyTestCheck,
} from "@/common/api/exam";
import { managercourseInfo } from "@/common/api/course";

export default {
  components: { vDialog },
  name: "taskResult",
  data() {
    return {
      showError: false,
      errorButtonText: "",
      confirmButtonText: "",
      cancelButtonText: "",
      status: "",
      paperId: "",
      id: "",
      type: "",
      taskId: "",
      taskName: "",
      orderCourseId: "",
      courseStuId: "",
      paper: "",
      //
      txt: "<div>确认申请补考吗？当前你的补考次数为<span style='color:#E95756'>1</span>次，下次考试要仔细复习哦。</div>",
      showDialog: false,
      classList: {
        0: "bg_color_white",
        1: "https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/wx/passed_img.png",
        2: "https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/wx/notpass_img.png",
      },
      tabarBgColor: {
        0: "transparent",
        1: "transparent",
        2: "transparent",
      },
      active: 0,
      useHeight: 0,
      applyExamTimes: 0,
    };
  },
  onLoad(options) {
    console.log("考核结果页面", options);
    this.useHeight = getApp().globalData.$useHeight;
    this.paperId = options.paperId;
    this.id = options.id;
    this.type = options.type;
    this.taskId = options.taskId;
    this.taskName = options.taskName;
    this.courseStuId = options.courseStuId;
    this.orderCourseId = options.orderCourseId;
    uni.setNavigationBarTitle({
      title: options.taskName,
    });
    this.getExam();
  },
  methods: {
    /* 申请重修 courseStuId */
    async reStartConfirm() {
      await reStart(this.courseStuId, uni.getStorageSync("stuId"));
      uni.showToast({
        title: "申请重修成功,请重新报名该课程",
        icon: "none",
        duration: 1500,
      });
      setTimeout(() => {
        uni.reLaunch({
          url: "/pages/selectiCourse/selectiCourse",
        });
      }, 1500);
    },
    /* 申请补考确认 courseStuId examid*/
    async dialogConfirm() {
      uni.showLoading({ mask: true, title: "加载中" });
      let res;
      // 如果是抽查
      if (this.type == "testCheck") {
        res = await ApplyTestCheck(this.id);
      }
      // 如果是考试
      else {
        res = await examApply(this.id, 0, this.courseStuId);
      }

      if (res.data.data == 1 || res.data.data == 2) {
        uni.showToast({
          title: res.data.msg,
          icon: "success",
          duration: 1500,
        });
      } else {
        uni.showToast({
          title: res.data.msg,
          duration: 1500,
        });
      }
    },
    /* 跳转查看详情 需要卷子paperid */
    lookAnswer() {
      uni.navigateTo({
        url: `/pages/selectiCourse/exam?type=${this.type}&id=${this.id}&paperId=${this.paperId}&taskId=${this.taskId}&orderCourseId=${this.orderCourseId}&status=result&taskName=${this.taskName}`,
      });
    },
    back() {
      uni.navigateBack();
    },
    async getExam() {
      let res = await getExamPaper(this.paperId);
      if (res.examPaper.passing == 1) {
        this.status = 1;
      } else if (res.examPaper.passing == -1) {
        this.status = 2;
        let Time = await getExamApplyTimes(this.paperId);
        this.applyExamTimes = Time.data;
        if (this.applyExamTimes == 0) {
          this.showError = false;
          this.confirmButtonText = "申请补考";
          this.cancelButtonText = "取消";
          this.txt = `<div>是否向老师申请一次补考机会?</div>`;
        } else {
          this.showError = false;
          this.confirmButtonText = "申请补考";
          this.cancelButtonText = "取消";
          this.txt = `<div>确认申请补考吗？当前你的补考次数为<span style='color:#E95756'>${this.applyExamTimes}</span>次，下次考试要仔细复习哦。</div>`;
        }
      } else {
        this.status = 0;
      }
      console.log(res);
      this.paper = res.examPaper;
    },
  },
};
</script>

<style scoped lang="scss">
.await {
  box-sizing: border-box;
  .await_icon {
    margin: 140rpx auto 0 auto;
    width: 168rpx;
    height: 158rpx;
  }
  .await_txt {
    text-align: center;
    margin-top: 28rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #28b28b;
    line-height: 44rpx;
  }
  .await_tip {
    text-align: center;
    margin-top: 8rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 40rpx;
  }
  .await_confirm {
    margin: 64rpx auto 0 auto;
    @include btn_plain_line(#ffffff, #333333, #ffffff) {
      width: 240rpx;
      height: 80rpx;
      border-radius: 40rpx;
      box-sizing: border-box;
      border: 2rpx solid #e5e5e5;
    }
  }
}
.pass_content {
  width: 100%;
  background: transparent;
  padding: 70rpx 32rpx 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pass_icon {
  width: 168rpx;
  height: 158rpx;
}
.pass_txt {
  font-size: 48rpx;
  font-weight: 600;
  color: #ffffff;
  margin: 24rpx 0;
}
.pass_info {
  padding-top: 64rpx;
  padding-bottom: 64rpx;
  box-sizing: border-box;
  width: 686rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(22, 66, 163, 0.12);
  border-radius: 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  .pass_info_item {
    display: flex;
    align-items: center;
    margin-bottom: 32rpx;
    .item_label {
      width: 128rpx;
      font-size: 32rpx;
      font-weight: 400;
      color: #999999;
    }
    .item_value {
      width: 262rpx;
      font-size: 32rpx;
      font-weight: 400;
      color: #333333;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin-left: 64rpx;
    }
  }
}
.font_bold {
  font-weight: bold !important;
}
.color_over {
  color: #28b28b !important;
}
.not_color_over {
  color: #e95756 !important;
}

.sure_btn {
  @include btn_plain(#e0f3ee, #28b28b) {
    width: 590rpx;
    height: 88rpx;
    border-radius: 44rpx;
    margin-top: 58rpx;
  }
}

.reset_btn {
  @include btn_plain(#feaa9b, #d81e06) {
    width: 590rpx;
    height: 88rpx;
    border-radius: 44rpx;
    margin-top: 58rpx;
  }
}

.detial_btn {
  @include btn_plain(#ffffff, #999999) {
    width: 590rpx;
    height: 88rpx;
    border-radius: 44rpx;
    margin-top: 16rpx;
    border: 2rpx solid #e5e5e5;
  }
}

.container {
  width: 100%;
  min-height: 100vh;
  background: transparent;
  padding: 70rpx 32rpx 0;
  box-sizing: border-box;
}
.bg_color_white {
  background: #fafafa;
}
.ablue {
  width: 100%;
  height: 688rpx;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.content {
  width: 100%;
  .content_title {
    font-size: 28rpx;
    font-weight: 600;
    color: #333333;
  }
  .part_description {
    font-size: 28rpx;
    font-weight: 400;
    color: #666666;
    width: 100%;
    margin-top: 32rpx;
  }
}
.step_item {
  width: 100%;
  padding: 32rpx 18rpx;
  box-sizing: border-box;
}
.steps {
  font-size: 28rpx;
  font-weight: 400;
  color: #666666;
}
.step_title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
  margin: 40rpx 0 48rpx;
}
.courseware_list {
  width: 100%;
}
.courseware_list_item {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 48rpx;
}
.pdf_img {
  width: 64rpx;
  height: 64rpx;
}
.pdf_name {
  font-size: 28rpx;
  font-weight: 400;
  color: #333333;
  margin-left: 32rpx;
}
.arrow_up {
  width: 40rpx;
  height: 20rpx;
}
.color_green {
  color: #ff4d03;
}
.color_little {
  position: absolute;
  top: -8rpx;
  color: #bfe7dd;
}
.btn_bottom {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fixed {
  width: 100%;
  display: flex;
  justify-content: center;
  position: fixed;
  bottom: env(safe-area-inset-bottom);
  left: 0;
}
.btn_text {
  font-size: 28rpx;
  font-weight: 400;
  color: #ff4d03;
}
.asked {
  position: fixed;
  right: 32rpx;
  bottom: 18%;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
  width: 120rpx;
  height: 120rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(0, 74, 88, 0.1),
    0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.08);
}
.asked_text {
  font-size: 24rpx;
  font-weight: 400;
  color: #ff4d03;
}
.comment_circle {
  margin-top: 4rpx;
  font-size: 46rpx;
  color: #ff4d03;
}
.popup_content {
  width: 100%;
  padding: 40rpx 56rpx 0;
  box-sizing: border-box;
}
.flex_bt {
  justify-content: space-between;
  display: flex;
  flex-wrap: wrap;
}
.btn_center {
  width: 100%;
  height: 152rpx;
  display: flex;
  justify-content: center;
}
.bg_color {
  background: linear-gradient(
    -120deg,
    #ffffff 0%,
    #ffffff 30%,
    #d1f7f3 40%,
    #d1f7f3 70%,
    #ffffff 100%
  );
}
.btn_close {
  width: 80rpx;
  height: 80rpx;
  margin-top: 32rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: rgba(40, 178, 139, 0.07);
  box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(0, 75, 88, 0.1),
    0rpx 0rpx 10rpx 0rpx rgba(0, 66, 41, 0.08);
}
.cross {
  font-size: 40rpx;
  color: #ff4d03;
}
.content_item {
  width: 304rpx;
  height: 144rpx;
  border-radius: 16rpx;
  font-size: 32rpx;
  font-weight: 800;
  padding: 28rpx;
  box-sizing: border-box;
}
.bg_purple {
  background: #e7e6ff;
  color: #4159a4;
}
.bg_blue {
  background: #e1f7ff;
  color: #995538;
}
.bg_blue_dark {
  background: #e4f0fe;
  color: #366d81;
}
.bg_brown {
  background: #ffebe5;
  color: #345c89;
}
.content_item:nth-child(n + 3) {
  margin-top: 32rpx;
}
</style>
